/*
 * Functions concern to Image element
 */
function add_image_element(name, x, y) {
	var div = $(document.createElement("div")).appendTo("#card");	// div element contains image
	var control = $("#elem-cltr").clone(true, true).attr("id", "").appendTo(div);	//div element contains control button
	var img = $(document.createElement("img")).appendTo(div);	// image element itself
	var id = "image-" + Image_count;
	
	img.attr("src", "/uploads/images/" + name);
	//img.css("width", "100%");
	//img.css("height", "100%");
	
	div.addClass("image-element");
	div.attr("id", id);
	div.attr("type", "image");
	
	// calculate position to put the div
	cardPx = $("#card").offset().left;
	cardPy = $("#card").offset().top;
	
	div.css("left", x-cardPx+"px");
	div.css("top", y-cardPy+"px");
	div.css("z-index", zIndexMax);
	
	// create an associated Table element holding attributes
	var attrTable = create_img_table_attribute(id);
	div.data("attr_table", attrTable);
	div.data("attributes", {"id": id, "angle": 0});
	/*
	var image_instance = new Element_class(div, attrTable, {
		id: id,
		angle: 0,
	});
	*/
	
	// save into global array
	//Image_element_array[id] = image_instance;
	Image_count ++;
	
	setTimeout(function(){
		//img.css("position", "relative");
	}, 1000);
	
	// make the div resizable and draggable
	div.draggable({start: dragStart});
	div.resizable();
	div.rotatable();
	
	// choose the div when clicked
	div.click(function(e){
		zIndexMax ++;
		$(this).css( "z-index" , zIndexMax );	// make it highest
		select_image(id);
	});
	
	// rotate
	div.dblclick(function(e){
		//alert("Double Click");
		var angle = $(this).data("attributes").angle += 10; 
		$(this).rotate({
			angle: angle
		});
	});
	
}

function select_image(imageId){
	if (imageId == selectingId) return;
	
	//alert(Image_element_array[imageId]);
	//var object = Image_element_array[imageId].property("Object");
	if (selectingId != ""){
		unselect_image(selectingId);
		selectingId = "";
	}
	
	var table = $("#"+imageId).data("attr_table");	// get attributes table element
	$("div#element-attributes ul#icons").before(table).show();	// insert into attribute area
	
	$("#"+imageId).addClass("image-element-chosen");
	selectingId = imageId;
	
	$("#"+selectingId+" div").show("slow");		// show handle area
	
	//$("div#element-attributes ul#icons").show();
	
	//alert(object.attr("id"));
}
function unselect_image(selectingId){
	$("#"+selectingId).data("attr_table").detach();	// remove the table from attribute area
	$("#"+selectingId).removeClass("image-element-chosen");	//
	$("#"+selectingId+" div.elem-cltr").hide("slow");	//hide control buttons
}

function create_img_table_attribute(elementId){
	var table = $(document.createElement("table"));
	$("<tr><th colspan='2'>" + elementId + "</th></tr>").appendTo(table);
	table.attr("width", "100%");
	table.attr("cellspacing", "0");
	table.attr("cellpadding", "4px");
	table.attr("elementId", elementId);
	return table;
}

function delete_image(imageId){
	$("#"+imageId).data("attr_table").remove();
	$("#"+imageId).remove();
	selectingId = "";
}

function set_image_attribute(id, name, value){
	
	// In case of Css attribute
	$("div#"+id +"").css(name, value);
}
function unset_image_attribute(id, name){
	
	// In case of Css attribute
	$("div#"+id + "").css(name, "");
}

/*
 * End image element functions
 */

function set_attribute(id, name, value){
	//var type = $("div#" + id).attr("type");
	
	//if (type=="image") set_image_attribute(id, name, value);
	//else if (type=="text") set_text_attribute(id, name, value);
	//else basic_set_prop(id, name, value);
	
	basic_set_prop(id, name, value);
	
}
function unset_attribute(id, name){
	//var type = $("div#" + id).attr("type");
	
	//if (type=="image") unset_image_attribute(id, name);
	//else if (type == "text")unset_text_attribute(id, name);
	//else basic_unset_prop(id, name);
	
	basic_unset_prop(id, name);
}

/*
 * Text element function
 */
function add_text_element(x, y){
	var textDiv = $(document.createElement("div")).appendTo("#card");
	var control = $("#elem-cltr").clone(true, true).attr("id", "").appendTo(textDiv);
	var span = $(document.createElement("div")).appendTo(textDiv);
	span.addClass("text");
	span.text("New Text");		// default value
	var id = "text-" + Text_count;
	
	
	textDiv.addClass("text-element");
	textDiv.attr("id", id);
	textDiv.attr("type", "text");
	textDiv.css("z-index", zIndexMax);
	
	// Calculate position 
	cardPx = $("#card").offset().left;
	cardPy = $("#card").offset().top;
	
	textDiv.css("left", x-cardPx+"px");
	textDiv.css("top", y-cardPy+"px");
	
	// create an associated Table element holding attributes
	var attrTable = create_text_table_attribute(id);
	textDiv.data("attr_table", attrTable);
	textDiv.data("attributes", {"id": id, "angle": 0 });
	
	textDiv.draggable();
	textDiv.resizable();
	textDiv.rotatable();
	
	// choose the div when clicked (same as image)
	textDiv.click(function(e){
		zIndexMax ++;
		$(this).css( "z-index" , zIndexMax );	// make it highest
		select_image(id);
	});
	
	Text_count ++;
}

function create_text_table_attribute(id){
	var attrTable = create_img_table_attribute(id);
	
	// Create the first attribute that not editable
	var tr = $(document.createElement("tr")).appendTo(attrTable);
	$(document.createElement("td")).addClass("attr-name").attr("width", "50%").text("Text").appendTo(tr);
	$("table tr#css_key_value td.attr-value").clone(true,true).text("New Text").appendTo(tr);
	
	return attrTable;
}

function set_text_attribute(id, name, value){
	
	if (name=="Text"){
		$("div#"+id+" div.text").text(value);
		return;
	}
	
	// In case of Css attribute
	$("div#"+id).css(name, value);
}
function unset_text_attribute(id, name){
	
	// In case of Css attribute
	$("div#"+id).css(name, "");
}